<template>
    <div
        class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 px-4 sm:px-6 lg:px-8 transition-all duration-300"
    >
        <div class="max-w-4xl w-full flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-16">
            <!-- 内容区域 -->
            <div class="text-center lg:text-left flex-1">
                <div class="mb-8">
                    <h1
                        class="text-8xl sm:text-9xl lg:text-[120px] font-bold bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400 bg-clip-text text-transparent leading-none mb-6"
                    >
                        404
                    </h1>
                    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-semibold text-gray-800 dark:text-gray-200 mb-4">
                        页面未找到
                    </h2>
                    <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 mb-8 max-w-md mx-auto lg:mx-0">
                        抱歉，您访问的页面不存在或已被移除
                    </p>
                </div>

                <!-- 操作按钮 -->
                <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                    <button
                        @click="goHome"
                        class="px-8 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-medium rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800"
                    >
                        返回首页
                    </button>
                    <button
                        @click="goBack"
                        class="px-8 py-3 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-medium rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
                    >
                        返回上页
                    </button>
                </div>
            </div>

            <!-- 插图区域 -->
            <div class="flex-1 max-w-md lg:max-w-lg">
                <div class="relative">
                    <!-- 背景装饰 -->
                    <div
                        class="absolute inset-0 bg-gradient-to-r from-blue-400/20 to-purple-400/20 dark:from-blue-500/20 dark:to-purple-500/20 rounded-full blur-3xl scale-150"
                    ></div>

                    <!-- SVG 插图 -->
                    <svg viewBox="0 0 400 300" class="relative z-10 w-full h-auto">
                        <defs>
                            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
                                <stop offset="0%" stop-color="#3b82f6" />
                                <stop offset="100%" stop-color="#8b5cf6" />
                            </linearGradient>
                            <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
                                <stop offset="0%" stop-color="#60a5fa" />
                                <stop offset="100%" stop-color="#a78bfa" />
                            </linearGradient>
                        </defs>

                        <!-- 背景圆形 -->
                        <circle cx="200" cy="150" r="120" fill="url(#grad1)" opacity="0.1" class="animate-pulse" />

                        <!-- 404文字 -->
                        <text
                            x="200"
                            y="120"
                            text-anchor="middle"
                            class="text-6xl font-bold fill-blue-500 dark:fill-blue-400 opacity-80"
                        >
                            404
                        </text>

                        <!-- 装饰性元素 -->
                        <circle cx="100" cy="80" r="8" fill="url(#grad2)" opacity="0.6" class="animate-bounce">
                            <animateTransform
                                attributeName="transform"
                                type="rotate"
                                values="0 100 80;360 100 80"
                                dur="20s"
                                repeatCount="indefinite"
                            />
                        </circle>
                        <circle
                            cx="300"
                            cy="220"
                            r="6"
                            fill="url(#grad2)"
                            opacity="0.6"
                            class="animate-bounce"
                            style="animation-delay: 1s"
                        >
                            <animateTransform
                                attributeName="transform"
                                type="rotate"
                                values="360 300 220;0 300 220"
                                dur="15s"
                                repeatCount="indefinite"
                            />
                        </circle>
                        <circle
                            cx="80"
                            cy="200"
                            r="4"
                            fill="url(#grad2)"
                            opacity="0.4"
                            class="animate-bounce"
                            style="animation-delay: 2s"
                        >
                            <animateTransform
                                attributeName="transform"
                                type="rotate"
                                values="0 80 200;360 80 200"
                                dur="25s"
                                repeatCount="indefinite"
                            />
                        </circle>
                        <circle
                            cx="320"
                            cy="100"
                            r="5"
                            fill="url(#grad2)"
                            opacity="0.4"
                            class="animate-bounce"
                            style="animation-delay: 3s"
                        >
                            <animateTransform
                                attributeName="transform"
                                type="rotate"
                                values="360 320 100;0 320 100"
                                dur="18s"
                                repeatCount="indefinite"
                            />
                        </circle>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const goHome = () => {
    router.push('/')
}

const goBack = () => {
    router.go(-1)
}
</script>

<style lang="scss" scoped>
/* 自定义动画 */
@keyframes float {
    0%,
    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* 确保SVG中的文字样式正确应用 */
svg text {
    font-family:
        system-ui,
        -apple-system,
        sans-serif;
    font-weight: 700;
}

/* 深色主题下的SVG颜色调整 */
.dark svg text {
    fill: #60a5fa;
}

/* 响应式调整 */
@media (max-width: 640px) {
    .text-8xl {
        font-size: 4rem;
    }

    .text-3xl {
        font-size: 1.875rem;
    }
}

@media (max-width: 480px) {
    .text-8xl {
        font-size: 3rem;
    }

    .text-3xl {
        font-size: 1.5rem;
    }
}
</style>
